<style lang="less">
    @import "mqMessageManagement.less";
</style>
<template>
    <div>
        <Card>
            <Row>
                <Form  ref="searchForm" :model="searchForm" inline :label-width="150" class="search">
                    <div class="search">
                        <Row>
                            <Col align="left">
                                <Form-item label="交换" prop="exchange">
                                    <Input type="text" v-model="searchForm.exchange" clearable placeholder="请输入交换名称"/>
                                </Form-item>
                                <Form-item label="交易代码" prop="code">
                                    <Input type="text" v-model="searchForm.code" clearable placeholder="请输入交易代码"/>
                                </Form-item>
                                <Form-item label="队列" prop="routerkey">
                                    <Input type="text" v-model="searchForm.routerkey" clearable placeholder="请输入队列"/>
                                </Form-item>
                                <Form-item label="已发送成功" prop="status">
                                    <Select v-model="searchForm.status"  clearable placeholder="请选择状态">
                                        <Option v-for="item in dataDic.isType" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="上一次失败时间">
                                    <DatePicker v-model="failedTime" type="datetimerange" :start-date="dateFocus" format="yyyy-MM-dd HH:mm:ss" clearable
                                                @on-change="selectFailedTime" placeholder="请选择失败时间">
                                    </DatePicker>
                                </Form-item>
                                <Form-item label="发送成功时间">
                                    <DatePicker v-model="successTime" type="daterange" :start-date="dateFocus" format="yyyy-MM-dd" clearable
                                                @on-change="selectSuccessTime" placeholder="请选择成功时间">
                                    </DatePicker>
                                </Form-item>
                            </Col>
                        </Row>
                    </div>
                    <Row>
                        <Col align="middle">
                            <Form-item>
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                            </Form-item>
                        </Col>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom"
                               @on-selection-change="showSelect" ref="action">
                            <template slot-scope="{ row, index }" slot="id">
                                <Button type="primary" size="small" @click="editBankAccount(row)">详情</Button>
                                <Button type="primary" size="small" :disabled="row.status !== 'no'" @click="deleteBankAccount(row)">发送</Button>
                            </template>
                            <template slot-scope="{ row, index }" slot="status">
                                <span>{{setDictTitleByType("isType",row.status)}}</span>
                            </template>

                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Form>
            </Row>
        </Card>
        <Modal
            :title="modalTitle"
            v-model="modalVisible"
            :mask-closable="false"
            :width="800"
            :styles="{top: '50px'}"
        >
            <Form ref="form" class="detail" :model="form" :label-width="150">
                <FormItem label="交换" prop="exchange">
                    <Input v-model="form.exchange" disabled type="text"/>
                </FormItem>
                <FormItem label="交易代码" prop="code">
                    <Input v-model="form.code" disabled type="text"/>
                </FormItem>
                <FormItem label="队列" prop="routerkey">
                    <Input v-model="form.routerkey" disabled type="text"/>
                </FormItem>
                <FormItem label="发送内容" prop="content" >
                    <Input v-model="form.content" :autosize="true" disabled type="textarea"/>
                </FormItem>
                <FormItem label="是否发送成功" prop="status">
                    <Select v-model="form.status"  disabled placeholder="请选择状态">
                        <Option v-for="item in dataDic.isType" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="上一次发送失败时间" prop="lastFailedTime">
                    <DatePicker v-model="form.lastFailedTime" disabled placeholder="" format="yyyy-MM-dd HH:mm:ss"></DatePicker>
                </FormItem>
                <FormItem label="发送成功时间" prop="successTime">
                    <DatePicker v-model="form.successTime" disabled placeholder="" format="yyyy-MM-dd HH:mm:ss"></DatePicker>
                </FormItem>
                <FormItem label="发送成功操作人" prop="successOperator">
                    <Input v-model="form.successOperator" disabled type="text"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="modalVisible=false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    import {
        getByTypes
    } from "_p/basic/api/admin/datadic";
    import {
        getMessagePage,
        sendMq
    } from "@/projects/afs-core-business/api/afs-case/mq-message-management/maMessageManagement";

    export default {
        name: "mq-message-management",
        comments:{
        },
        data() {
            return {
                modalTitle:"",
                modalVisible:false,
                modalType:"",
                submitLoading: false, // 添加或编辑提交状态
                form:{
                    bankCode:"",
                    branchBankName:"",
                    ebankCode:"",
                    account:""
                },
                searchForm:{exchange:"",code:"",routerkey:"",status:"",startFailedTime:"",endFailedTime:"",startSuccessTime:"",endSuccessTime:""},
                failedTime:"",
                successTime:"",
                data:[],
                total: 0,
                dicKeys: [
                    "isType"
                ],
                dataDic:{},
                loading: false,
                columns: [
                    {title: "操作",key: "id",minWidth: 150,align: "center",slot: "id",fixed:"left",slot: "id"},
                    {title: "交换",key: "exchange",minWidth: 100,align: "center"},
                    {title: "交易代码",key: "code",minWidth: 100,align: "center"},
                    {title: "队列",key: "routerkey",minWidth: 200,align: "center"},
                    {title: "是否已发送成功",key: "status",minWidth: 150,align: "center",slot: "status"},
                    {title: "上一次发送失败时间",key: "lastFailedTime",minWidth: 150,align: "center"},
                    {title: "发送成功时间",key: "successTime",minWidth: 150,align: "center"},
                    {title: "发送成功操作人",key: "successOperator",minWidth: 140,align: "center"},
                ]
            }
        },
        methods:{
            selectFailedTime(v) {
                if (v) {
                    this.searchForm.startFailedTime = v[0];
                    this.searchForm.endFailedTime = v[1];
                }
            },
            selectSuccessTime(v) {
                if (v) {
                    this.searchForm.startSuccessTime = v[0];
                    this.searchForm.endSuccessTime = v[1];
                }
            },
            deleteBankAccount(v){
                let params = {
                    id:v.id
                }
                sendMq(params).then(res => {
                    if (res.code === "0000") {
                        this.$Message.success(res.data);
                        this.getMessageList();
                    }else{
                        this.$Message.error(res.data);
                        this.getMessageList();
                    }
                }).catch(e => {
                    this.getMessageList();
                });
            },
            editBankAccount(v){
                this.modalType = 1;
                this.$refs.form.resetFields();
                // 转换null为""
                for (let attr in v) {
                    if (v[attr] === null) {
                        v[attr] = "";
                    }
                }
                let str = JSON.stringify(v);
                let data = JSON.parse(str);
                this.form = data;
                this.modalTitle = "mq消息详情";
                this.modalVisible = true;
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getMessageList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.startFailedTime = "";
                this.searchForm.endFailedTime = "";
                this.searchForm.startSuccessTime = "";
                this.searchForm.endSuccessTime = "";
                this.failedTime = "";
                this.successTime = "",
                // 重新加载数据
                this.getMessageList();
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getMessageList();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getMessageList();
            },
            initDataDic(){
                let self = this;
                getByTypes(this.dicKeys).then(res => {
                    if (res.code === "0000" && res.data) {
                        self.dataDic = res.data;
                    }
                });
            },
            getDic(v){
                let dic = []
                switch(v) {
                    case "isType":
                        dic = this.dataDic.isType;
                        break;
                    default:
                }
                return dic;
            },
            setDictTitleByType(v1,v2){
                let dic = {}
                if(!this.getDic(v1)) return '';
                this.getDic(v1).forEach(column => {
                    if(column.value === v2){
                        dic = column;
                    }
                });
                return dic.title;
            },
            getMessageList() {
                // 多条件搜索任务列表
                this.loading = true;
                getMessagePage(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
                this.selectCount=0;
            },
            init(){
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getMessageList();
            },
        },
        mounted() {
            this.initDataDic();
            this.init();
        }
    }
</script>

<style scoped>

</style>
